import React, { Component} from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import * as utils from '@/utils/index.js'
import { bindActionCreators } from 'redux'
import actionsC from '@/store/actions.js'
import { getCurrentNode } from '@/store/selectors'
import PanleWrapper from '@/components/panel/panel-wrapper'

let nodeActions=actionsC()

/**
 * @param
 *  
 * @return list
 **/
function getParents(path, nodeTree){
    var list = []
    for(let i=0;i<path.length;i++){
        let node = utils.getNodeByPath(nodeTree, _.take(path, i))
        if(node){
            list.push(node)
        }
    }
    return list
}

function matchSelector(parents, selector){
    var matchedIndex = []
    var remark = []
    if(!_.isArray(selector)){
        return []
    }
    selector.forEach((sel)=>{
        parents.forEach((item,index)=>{
            let _class = _.get(item.attr, 'class', [])
            _class = _class ? _class : []
            let reg = new RegExp(`.${_class.join("|.")}`,"g")
            let matched = sel.match(reg) ? sel.match(reg) : []
            if(matched.join("")==sel){
                matchedIndex.push(index)
                matched.forEach((mt)=>{
                    mt = mt.replace('.', '')
                    remark.push(`${index},${_class.indexOf(mt)}`)
                })
            }
        })
    })
    return remark
}

class PanleSelector extends Component {
	constructor(props) {
		super(props)
	}
	componentWillReceiveProps(nextProp){
	}
	propChange(){
    }
    classClick(remark, op, parents, used){
        const {currentPath, nodeTree, dispatch} = this.props
        let _remark = _.clone(remark)
        let newSelector = []
        if(used) {
            _.remove(_remark, (item)=>{
                return item == op
            })
        } else {
            _remark.push(op)
        }
        parents.forEach((item,index)=>{
            let sel = []
            item.attr.class.forEach((item2,index2)=>{
                if(_remark.indexOf(`${index},${index2}`) != -1){
                    sel.push(item2)
                }
            })
            if(sel.length!=0){
                newSelector.push(`.${sel.join(".")}`)
            }
        })
        dispatch.nodeUpdateByPath({
			path: currentPath,
			node:{
                selector: newSelector
            }
		});
    }
	render() {
        const {currentNode, currentPath, nodeTree} = this.props
        const {selector} = currentNode
        var parents = getParents(currentPath, nodeTree)
        parents.shift()
        parents.push(currentNode)
        var matchedCls = matchSelector(parents, selector)
		return (
            <PanleWrapper clsName="panel-selector" panelName="selector">
                <ul className="selector-path">
                    {utils.render_list(parents,(node, index)=>{
                        if(currentNode.isRoot) return ""
                        if(_.get(node.attr,'class.length',[])!=0){
                            return(
                                <li className="selector-item" key={index}>
                                    {utils.render_list(node.attr.class, (_class, index2)=>{
                                        let used = matchedCls.indexOf(`${index},${index2}`) != -1
                                        return (
                                            <span 
                                                onClick={this.classClick.bind(this, matchedCls, `${index},${index2}`, parents, used)} 
                                                className={classnames("class-item",{used: used})} key={_class + index2}
                                            >.{_class}</span>
                                        )
                                    })}
                                </li>
                            )
                        }else{
                            return ""
                        }
                    })}
                </ul>
            </PanleWrapper>
		)
	}
}

PanleSelector.defaultProps = {
};

function mapStateToProps(state) {
	return {
        currentNode: getCurrentNode(state),
        currentPath: state.currentPath,
        nodeTree: state.nodeTree
	}
}

function mapDispatchToProps(dispatch) {
	return {
		dispatch: bindActionCreators(nodeActions, dispatch),
	}
}

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(PanleSelector)

